﻿@using System.Globalization
@using CleverCMS.Blog.Data.Entities
@using CleverCMS.Blog.Data.Extensions
@using CleverCMS.Blog.Services.ViewModels
@model IndexModel

@{
    Layout = "~/skins/zottor/views/zottor.cshtml";
}

@section HeadContent{
    <meta name="keywords" content="@Model.Entry.BlogEntry.MetaKeywords" />
    <meta name="description" content="@Model.Entry.BlogEntry.MetaDescription" />

    <link rel="stylesheet" href="@Url.Content("~/Content/jquery.rating.css")"/>
    <!-- jq rating -->
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-2.0.2.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.rating/jquery.rating.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.rating/jquery.rating.pack.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.rating/jquery.MetaData.js")"></script>

}

@section TitleContent{
    @Model.Entry.BlogEntry.SeoTitle
}

@functions
{
    private string str = "";
    public string CreateNode(BlogEntryComment node)
    {
        var selNodes = Model.Entry.Comments.Where(x => x.ParentId == node.Id).ToList();
        if (selNodes.Count() == 0)
        {
            return "";
        }

        foreach (var selNode in selNodes)
        {
            BlogEntryComment childNode = new BlogEntryComment();
            childNode.Id = selNode.Id;
            str += "<hr/><div class='media'><a href='#' class='pull-left'><img alt='' src='" + Url.Content("~/Skins/Zottor/Images/avatar1.jpg") + "' class='media-object'></a><div class='media-body'>" +
                   "<h4 class='media-heading'>" + selNode.Name + "</h4><span>" + @selNode.Created.ToShortDateString() + " " + @selNode.Created.ToShortTimeString() + " | <a href='#' id='reply' rel='id_" + selNode.Id + "'>Reply</a></span>" +
                   "<p>" + selNode.Comment + "</p>";
            CreateNode(childNode);
            str += "</div></div>";
        }
        return str;
    }
}

<div class="row-fluid">
    <div class="span8 ">
        <div class="row-fluid">
            <div class="blog">
                <div class="span2 orange">
                    <a href="javascript:;" class="blog-features date active">
                        <p class="day">@Model.Entry.BlogEntry.Created.Day</p>
                        <p class="month">@Model.Entry.BlogEntry.Created.Date.ToString("MMM")</p>
                    </a>
                    <a href="#com" class="blog-features comments">
                        <i class=" icon-comments-alt"></i>
                        <p class="info">@Model.Entry.BlogEntry.BlogEntryComments.Count Comments</p>
                    </a>
                    <a href="javascript:;" class="blog-features comments">
                        <i class=" icon-eye-open"></i>
                        <p class="info">@Model.Entry.BlogEntry.ViewCount Views</p>
                    </a>
                </div>
                <div class="span10">
                    <h2>@Model.Entry.BlogEntry.Header</h2>
                    <p>BY <a href="javascript:;" class="author">@Model.Entry.BlogEntry.Author</a> | @Html.Raw(Model.Entry.BlogEntry.Created.ToString("MMM", CultureInfo.InvariantCulture) + " " + Model.Entry.BlogEntry.Created.DayOfWeek.ToString() + ", " + Model.Entry.BlogEntry.Created.ToShortTimeString())</p>
                    @*<img alt="" src="">*@
                    <p>@Html.Raw(Model.Entry.BlogEntry.Content)</p>

                    <div class="row-fluid">
                        <div class="span12">
                            <b>Tags:</b> @Model.Entry.BlogEntry.BlogEntryTags.ToTagString()
                        </div>
                    </div>

                    @if (Model.Entry.BlogEntry.ShowRating)
                    {
                        <div class="row-fluid">
                            <div class="span12">
                                <b>Rating:</b> @{ Html.RenderPartial("_BlogRatingControl", Model.Rating);}
                            </div>
                        </div>
                    }

                    <span id="com"></span>
                    @if (Model.Entry.BlogEntry.BlogEntryComments.Count() != 0)
                    {
                        <h3>Comments</h3>
                    }
                    else
                    {
                        <h3>Have no comments</h3>
                    }
                    <hr />

                    @{
                        var nodes = Model.Entry.Comments.Where(x => x.ParentId == null).ToList();
                        foreach (var node in nodes)
                        {
                            var root = new BlogEntryComment { Id = node.Id };
                        <div class="media">
                            <a href="#" class="pull-left">
                                <img alt="" src="@Url.Content("~/Skins/Zottor/Images/avatar2.jpg")" class="media-object">
                            </a>
                            <div class="media-body">
                                <h4 class="media-heading">@node.Name</h4>
                                <span>@node.Created.ToShortDateString() @node.Created.ToShortTimeString() | <a href="#" id="reply" rel="id_@node.Id">Reply</a></span>
                                <p>@node.Comment</p>
                                @Html.Raw(CreateNode(root))
                            </div>
                        </div>
                        <hr />
                            str = "";
                        }
                    }

                    <div class="post-comment" id="post-comment">
                        <h3 id="@Model.Entry.BlogEntry.Id">Post Comments</h3>
                        <p id="quoting" style="font-style: italic"></p>
                        <form id="myform">
                            <label>Name</label>
                            <input type="text" class="span7" id="name">
                            <label>Email <span class="color-red">*</span></label>
                            <input type="text" class="span7" id="email"><span id="valid" style="margin-left: 20px;"></span>
                            <label>Message</label>
                            <textarea class="span10" rows="8" id="message"></textarea>
                            <p>
                                <button class="btn" type="submit" id="post">Post Comment</button>
                            </p>
                        </form>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="span4">
        @{Html.RenderPartial("_CategoriesControl", Model.Categories);}
        @{Html.RenderPartial("_LatestControl", Model.LatesBlog);}
        @{Html.RenderPartial("_TagsControl", Model.Tags);}
        @{Html.RenderPartial("_ArchiveControl", Model.Dates);}
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        var p = $(".post-comment > h3");
        var reply = false;
        var validEmail = false;

        $('#email').blur(function () {
            if ($(this).val() != '') {
                var pattern = /^([a-z0-9_\.-])+@@[a-z0-9-]+\.([a-z]{2,4}\.)?[a-z]{2,4}$/i;
                if (pattern.test($(this).val())) {
                    $('#valid').text('Correct').css({ 'color': '#569b44' });
                    validEmail = true;
                } else {
                    $('#valid').text('Incorrect Email').css({ 'color': '#ff0000' });
                    validEmail = false;
                }
            } else {
                $('#valid').text('Email field must not be empty').css({ 'color': '#ff0000' });
                validEmail = false;
            }
        });

        $(document).on("click", "#reply", function (e) {
            e.preventDefault();
            var replyToId = $(this).attr("rel").replace("id_", "");
            $(".post-comment > h3").html("Reply to<a id='cancel' href='#' onclick='javascript:void(0);' style='padding-left: 20px;'>Cancel</a>").attr("class", replyToId);
            var message = $(this).parent().siblings("p").text();
            $("#quoting").text('"' + message + '"');
            document.location.href = "#post-comment";
            reply = true;
        });

        $(document).on("click", "#cancel", function (e) {
            reply = false;
            $(".post-comment > h3").html("Post Comment");
            e.preventDefault();
            $("#quoting").text("");
        });

        $("#post").click(function (event) {
            var r;
            if (reply == true)
                r = p.attr("class");
            else
                r = null;

            var data = {
                entryId: p.attr("id"),
                name: $("#name").val(),
                email: $("#email").val(),
                comment: $("#message").val(),
                replyId: r
            };

            if (validEmail == true) {
                $.ajax({
                    dataType: "json",
                    type: "POST",
                    url: '@Url.Action("AddComment", "Blog")',
                    data: { entryId: p.attr("id"), name: $("#name").val(), email: $("#email").val(), comment: $("#message").val(), replyId: r },
                    async: false,
                    success: function (message) {
                        if (message.result) {
                            if (data.replyId != null) {
                                var mes = "<div class='media' id='temp'>" +
                                    "<hr><a class='pull-left' href='#'><img class='media-object' src='@Url.Content("~/Skins/Zottor/Images/avatar2.jpg")' alt=''>" +
                                    "</a><div class='media-body'><h4 class='media-heading'>" + data.name + "</h4><span>9/3/2013 2:28 PM | " +
                                    "<a id='reply' rel='id_" + message.Id + "' href='#'>Reply</a></span><p>" + data.comment + "</p></div></div>";
                                $("a[rel $= '" + data.replyId + "']").parent().parent().children("p:last").after(mes);
                                $("#temp").hide().fadeIn(900).attr("id", "");
                                event.preventDefault ? event.preventDefault() : (event.returnValue = false);
                            } else {
                                var mes = "<div class='media' id='temp'>" +
                                    "<hr><a class='pull-left' href='#'><img class='media-object' src='@Url.Content("~/Skins/Zottor/Images/avatar2.jpg")' alt=''>" +
                                    "</a><div class='media-body'><h4 class='media-heading'>" + data.name + "</h4><span>9/3/2013 2:28 PM | " +
                                    "<a id='reply' rel='id_" + message.id + "' href='#'>Reply</a></span><p>" + data.comment + "</p></div></div>";
                                $(".span10").children("hr:last").before(mes);
                                $("#temp").hide().fadeIn(900).attr("id", "");
                                event.preventDefault ? event.preventDefault() : (event.returnValue = false);
                            }
                        }
                    },
                    error: function () {
                        alert("ERROR");
                    }
                });
                $('#myform').trigger('reset');
                $('#valid').text('');
                validEmail = false;
            } else {
                $('input#email').focus();
                event.preventDefault ? event.preventDefault() : (event.returnValue = false);
            }
        });
    })
</script>
